import React, { memo, useEffect } from 'react'
import MainWrapper from '@/common/MainWrapper'
import { withRouter } from 'react-router-dom'
import { getArticleId } from '@/utils/common'
import ArticleDetail from '@/components/b_article_detail'
import ArticleNavbar from '@/components/b_article_navbar'
import { Col, Row } from 'antd'
import { scrollAnimation } from '@/utils/scroll'
import {
  getArticleDetailAction,
  getArticleDiscussAction
} from '@/store/blog/actionCreators'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import ArticleDiscuss from '@/components/b_article_discuss'

function B_Detail(props) {
  const articleId = getArticleId(props)
  const userId = props.match.params.id
  const dispatch = useDispatch()

  useEffect(() => {
    document.title = '文章'
    dispatch(getArticleDetailAction(articleId))
    let timer = setTimeout(() => {
      scrollAnimation(0, window.innerHeight - 20)
    }, 100)
    return () => {
      clearTimeout(timer)
    }
  }, [dispatch, articleId])

  // 获取用户评论
  useEffect(() => {
    articleId && dispatch(getArticleDiscussAction(articleId))
  }, [dispatch, articleId])

  const { articleDetail = {} } = useSelector(
    (state) => ({
      articleDetail: state.blogReducer.getIn(['articleDetail'])
    }),
    shallowEqual
  )

  return (
    <MainWrapper>
      <Row>
        <Col
          lg={{ span: 12, offset: 3 }}
          md={{ span: 14, offset: 2 }}
          sm={{ span: 22, offset: 1 }}
          xs={{ span: 22, offset: 1 }}
        >
          <ArticleDetail articleDetail={articleDetail} userId={userId} />
          <ArticleDiscuss articleId={articleId} />
        </Col>
        <Col
          lg={{ span: 5, offset: 1 }}
          md={{ span: 5, offset: 1 }}
          sm={{ span: 0 }}
          xs={{ span: 0 }}
        >
          <ArticleNavbar articleDetail={articleDetail} />
        </Col>
      </Row>
    </MainWrapper>
  )
}

export default memo(withRouter(B_Detail))
